<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { useBooleanStore } from '@/store';
  import { taskOutQuery } from '@/api/system-basic';

  const showDrawer = ref<boolean>(false);
  const booleanStore = useBooleanStore();
  const columns: any[] = [
    {
      title: '缓存箱状态',
      dataIndex: 'workbinStatus',
    },
    {
      title: '容器编号',
      dataIndex: 'palletCode',
    },
    {
      title: '巷道',
      dataIndex: 'roadway',
    },
  ];
  // 创建一个响应式的本地副本
  const localTableData = ref<any[]>([]);
  async function searchGKLong() {
    const data = await taskOutQuery({});
    if (data.retCode) {
      localTableData.value = data.result;
    } else {
      localTableData.value = [];
    }
  }

  // 监听弹框
  watch(
    () => booleanStore.boolValue2,
    (newValue: boolean) => {
      if (booleanStore.num2 === 8) showDrawer.value = newValue;
      searchGKLong();
    }
  );

  function afterVisibleChange(val: any) {
    if (!val) {
      booleanStore.toggleBool2(8);
    }
  }
  function handleCancel() {
    booleanStore.toggleBool2(8);
  }
</script>

<template>
  <a-drawer
    :width="500"
    :height="340"
    :visible="showDrawer"
    placement="right"
    :footer="false"
    @after-visible-change="afterVisibleChange"
    @cancel="handleCancel"
  >
    <template #title> 出库任务 </template>
    <div>
      <a-table
        :stripe="true"
        class="top-table"
        :columns="columns"
        :data="localTableData"
      >
      </a-table>
    </div>
  </a-drawer>
</template>

<style scoped>
  .top-table {
    white-space: nowrap;
  }
  .add {
    background-color: #bacf65;
    color: #fff;
  }
  .clear {
    margin-left: 10px;
  }
</style>
